<!--
 * @Autor: Haiting Zhao
 * @Date: 2021-12-07 14:56:01
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-20 08:46:01
 * @Description: file content
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\kyproject\PatentEnd.vue
-->
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>科研项目</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'EndApply' }">结题申请</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>结题申请</el-breadcrumb-item> -->
      <el-breadcrumb-item>专利结题</el-breadcrumb-item>
    </el-breadcrumb>
    <!--返回按钮区-->
    <el-button type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    <el-container>
      <el-main>
        <el-descriptions :title="projectdetail.projectName">{{ projectdetail.projectName }}
          <el-descriptions-item label="创建人">{{ leadername }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ projectdetail.startTime | formatDate }}</el-descriptions-item>
          <el-descriptions-item label="计划完成时间">{{ projectdetail.planTime | formatDate }}</el-descriptions-item>
          <el-descriptions-item label="成果归属单位">
            <el-tag size="small">{{ aodname }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目经费">{{ projectdetail.outlay }}元</el-descriptions-item>
        </el-descriptions>
        <el-row>
          <el-steps :active="projectdetail.statusId" align-center>
            <el-step title="项目申请" />
            <el-step title="初审通过" />
            <el-step title="二审通过" />
            <el-step title="结题申请" />
            <el-step title="项目完成" />
          </el-steps>
        </el-row>
        <el-row>
          <el-row>团队成员列表</el-row>
          <el-table :data="projectdetail.team" border stripe style="width: 1200px;">
            <el-table-column type="index" label="#" />
            <el-table-column label="成员姓名" prop="userRealname" />
            <el-table-column label="成员电话" prop="userMobile" />
            <el-table-column label="成员邮箱" prop="userEmail" />
            <el-table-column label="成员学工号" prop="userNumber" />
          </el-table>
        </el-row>
        <el-row :gutter="20">

          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">

            <el-form-item>
              <el-col :span="11">
                <el-form-item label="专利名称" prop="patentname">
                  <el-input v-model="ruleForm.patentname" type="text" placeholder="请输入专利名称" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="专利类型" prop="ptid">
                  <el-select v-model="ruleForm.ptid" placeholder="请选择专利类型" @focus="getptlist()">
                    <el-option
                      v-for="(item,index) in ptlist"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="专利范围" prop="prid">
                  <el-select v-model="ruleForm.prid" placeholder="请选择专利范围" @focus="getptlist()">
                    <el-option
                      v-for="(item,index) in ptlist"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="专利状态" prop="psid">
                  <el-select v-model="ruleForm.psid" placeholder="请选择专利状态" @focus="getpslist()">
                    <el-option
                      v-for="(item,index) in pslist"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="申请编号" prop="applicationnumber">
                  <el-input v-model="ruleForm.applicationnumber" type="text" placeholder="请输入申请编号" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="申请时间" required prop="applicationtime">
                  <el-date-picker v-model="ruleForm.applicationtime" type="date" placeholder="选择日期" style="width: 100%;" :picker-options="pickerOptions0" />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="授权编号" prop="authorizationnumber">
                  <el-input v-model="ruleForm.authorizationnumber" type="text" placeholder="请输入授权编号" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="授权时间" required prop="authorizationtime">
                  <el-date-picker v-model="ruleForm.authorizationtime" type="date" placeholder="选择日期" style="width: 100%;" :picker-options="pickerOptions1" />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="11">
                <el-form-item label="公开编号" prop="publicnumber">
                  <el-input v-model="ruleForm.publicnumber" type="text" placeholder="请输入公开编号" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="公开时间" required prop="publictime">
                  <el-date-picker v-model="ruleForm.publictime" type="date" placeholder="选择日期" style="width: 100%;" :picker-options="pickerOptions2" />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col>
                <el-form-item label="上传专利" prop="patentfile">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    :disabled="(projectdetail.statusId) !== 3? true : false"
                    :action="uploadUrl2()"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :data="upData2"
                    :on-error="uploadFalse2"
                    :on-success="uploadSuccess2"
                    :auto-upload="false"
                    :before-upload="beforeAvatarUpload2"
                  >
                    <el-button slot="trigger" :disabled="(projectdetail.statusId) !== 3? true : false" size="small" type="primary">选取文件</el-button>
                    <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                    <div slot="tip" class="el-upload__tip">请上传专利文件！</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col>
                <el-form-item label=" ">
                  <el-button :disabled="(projectdetail.statusId) !== 3? true : false" type="primary" @click="patentendapply('ruleForm')">提交申请</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Patentend',
  filters: {
    formatDate: function(value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  data() {
    return {
      projectdetail: this.$route.params.projectdetail, // 项目详细信息
      patentid: '', // 预申请id
      ptlist: [],
      pslist: [],
      leadername: '',
      aodname: '',
      patentfileform: {
        primaryId: '',
        projectId: '',
        atId: '',
        categoryId: '',
        file: ''
      },
      patentform: {
        aodId: '', // 归属单位
        applicationNumber: '', // 申请编号
        applicationTime: '', // 申请日期
        authorizationNumber: '', // 授权编号
        authorizationTime: '', // 授权日期
        leaderId: '', // 负责人
        patentId: '', // 预申请
        patentName: '', // 名称
        prId: '', // 专利范围
        projectId: '',
        psId: '', // 专利状态
        ptId: '', // 专利类型
        publicNumber: '', // 公开编号
        publicTime: '' // 公开日期
      },
      patentform2: {
        data: {}
      },
      ruleForm: {
        patentname: '',
        ptid: '',
        prid: '',
        psid: '',
        applicationnumber: '',
        applicationtime: '',
        authorizationnumber: '',
        authorizationtime: '',
        publicnumber: '',
        publictime: ''
      },
      rules: {
        patentname: [
          { required: true, message: '请填写专利名称', trigger: 'blur' },
          { max: 32, message: '长度不能超过 32 个字符', trigger: 'blur' }
        ],
        ptid: [
          { required: true, message: '请选择专利类型', trigger: 'change' }
        ],
        prid: [
          { required: true, message: '请选择专利范围', trigger: 'change' }
        ],
        psid: [
          { required: true, message: '请选择专利状态', trigger: 'change' }
        ],
        applicationnumber: [
          { required: true, message: '请填写申请编号', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '申请编号不合法，应为数字', trigger: 'blur' }
        ],
        applicationtime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        authorizationnumber: [
          { required: true, message: '请填写授权编号', trigger: 'blur' },
          { pattern: /^[a-zA-Z]{2}\d{1,}$/, message: '授权编号不合法，应为两位英文开头加数字', trigger: 'blur' }
        ],
        authorizationtime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        publicnumber: [
          { required: true, message: '请填写公开编号', trigger: 'blur' },
          { pattern: /^[a-zA-Z]{2}\d{1,}$/, message: '公开编号不合法，应为两位英文开头加数字', trigger: 'blur' }
        ],
        publictime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.ruleForm.authorizationtime !== '') { // 如果第二个选了
            return time.getTime() > this.ruleForm.authorizationtime // 那么在第二个之后 当前之前
          } else if (this.ruleForm.publictime !== '') { // 如果第二个没选 第一个选了
            return time.getTime() > this.ruleForm.publictime // 那么在第一个之后 当前之前
          } else { // 如果前面两个都没选
            return time.getTime() > Date.now() // 那么在当前之前
          }
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.ruleForm.applicationtime !== '' && this.ruleForm.publictime !== '') { // 如果前后都选了 那么在两者之间
            return time.getTime() < this.ruleForm.applicationtime || time.getTime() > this.ruleForm.publictime
          } else if (this.ruleForm.applicationtime !== '' && this.ruleForm.publictime === '') { // 如果前面选了 后面没选
            return time.getTime() < this.ruleForm.applicationtime || time.getTime() > Date.now() // 那么在第一个之后 当前之前
          } else if (this.ruleForm.applicationtime === '' && this.ruleForm.publictime !== '') { // 前面没选 后面选了
            return time.getTime() > this.ruleForm.publictime // 那么在后面之前
          } else { // 前后都没选
            return time.getTime() > Date.now() // 当前之前
          }
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.ruleForm.authorizationtime !== '') { // 如果第二个选了
            return time.getTime() < this.ruleForm.authorizationtime || time.getTime() > Date.now() // 那么在第二个之后 当前之前
          } else if (this.ruleForm.applicationtime !== '') { // 如果第二个没选 第一个选了
            return time.getTime() < this.ruleForm.applicationtime || time.getTime() > Date.now() // 那么在第一个之后 当前之前
          } else { // 如果前面两个都没选
            return time.getTime() > Date.now() // 那么在当前之前
          }
        }
      }
    }
  },
  computed: {
    // 这里定义上传文件时携带的参数，即表单数据
    upData2: function() {
      // console.log('........')
      return this.patentfileform
    }
  },
  created() {
    this.projectdetail = JSON.parse(sessionStorage.getItem('projectdetail')) // 获取保存的项目信息
    this.getproductid() // 预创建id
    this.getleadername(this.projectdetail) // 获取负责人姓名
    this.getaodname(this.projectdetail) // 获取归属地单位姓名
  },
  methods: {

    /**
     * @description: 返回
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    back() {
      this.$router.go(-1)
    },

    /**
     * @description: 预创建id
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    getproductid() {
      axios.get('/applyFile/advance')
        .then(res => {
          this.patentid = res.data.data
          // console.log(this.patentid)
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 获取各种下拉列表数据字典
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    getptlist() {
      this.ptlist = JSON.parse(this.$store.getters.getpr).filter(function(ele) { return ele !== null })
    },
    getpslist() {
      this.pslist = JSON.parse(this.$store.getters.getps).filter(function(ele) { return ele !== null })
    },

    /**
     * @description: 查询负责人姓名
     * @param {*} params
     * @return {*}
     * @author: Haiting Zhao
     */
    getleadername(params) {
      // console.log(params)
      var a = params.leaderId
      // console.log(a)
      // console.log(params.team)
      for (var i = 0; i < params.team.length; i++) {
        if (a === params.team[i].userId) {
          this.leadername = params.team[i].userRealname
          // console.log(this.leadername)
        }
      }
    },

    /**
     * @description: 查询归属单位名称
     * @param {*} params
     * @return {*}
     * @author: Haiting Zhao
     */
    getaodname(params) {
      this.aodname = JSON.parse(this.$store.getters.getdepartment)
      this.aodname = this.aodname[params.aodId].name
    },

    /**
     * @description: 移除文件
     * @param {*} file
     * @param {*} fileList
     * @return {*}
     * @author: Haiting Zhao
     */
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    /**
     * @description: 预览
     * @param {*} file
     * @return {*}
     * @author: Haiting Zhao
     */
    handlePreview(file) {
      console.log(file)
    },

    /**
     * @description: 上传专利接口
     * @param {*}
     * @return {*}
     * @author: Haiting Zhao
     */
    uploadUrl2: function() {
      return 'api/applyFile/updateFile/patent' // 上传专利接口
    },

    /**
     * @description: 上传前对文件的大小和类型的判断
     * @param {*} file
     * @return {*}
     * @author: Haiting Zhao
     */
    beforeAvatarUpload2(file) {
      this.patentfileform.primaryId = this.patentid
      this.patentfileform.projectId = this.projectdetail.projectId
      this.patentfileform.atId = this.projectdetail.atId
      this.patentfileform.categoryId = this.ruleForm.ptid
      this.patentfileform.file = file.name
      this.patentfileform.file = file
      console.log(this.patentfileform.file)
      return 1
    },

    /**
     * @description: 上传专利
     * @param {*} patentfileform
     * @return {*}
     * @author: Haiting Zhao
     */
    submitUpload2(patentfileform) {
      var files = this.$refs.upload.uploadFiles
      if (files.length === 0) {
        this.$message({
          message: '请先上传专利材料!',
          type: 'error'
        })
        return
      }
      this.$refs.upload.submit()
    },

    /**
     * @description: 专利文件上传成功触发
     * @param {*} response
     * @return {*}
     * @author: Haiting Zhao
     */
    uploadSuccess2(response) {
      // console.log(response)
      if (response.code === 200) {
        this.$message({
          message: '导入专利成功',
          type: 'success'
        })
        axios.post('/applyFile/updateData/patent', this.patentform2)
          .then(() => {
            this.$message.success('专利成果申请成功！')
            // location.reload()
            this.$router.go(-1)
          })
          .catch(err => {
            this.$message.error('专利成果申请失败！')
            console.error(err)
          })
      } else if (response.code === 417) {
        this.$message({
          message: response.msg,
          type: 'error'
        })
      } else {
        this.$message({
          message: '导入专利失败',
          type: 'error'
        })
      }
    },

    /**
     * @description: 专利上传失败触发
     * @param {*} response
     * @return {*}
     * @author: Haiting Zhao
     */
    uploadFalse2(response) {
      // console.log(response)
      this.$message({
        message: '专利上传失败！',
        type: 'error'
      })
    },

    /**
     * @description: 专利结题提交
     * @param {*} formName
     * @return {*}
     * @author: Haiting Zhao
     */
    patentendapply(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.patentform.aodId = this.projectdetail.aodId
          this.patentform.leaderId = this.projectdetail.leaderId
          this.patentform.patentId = this.patentid
          this.patentform.patentName = this.ruleForm.patentname
          this.patentform.projectId = this.projectdetail.projectId
          this.patentform.prId = this.ruleForm.prid
          this.patentform.psId = this.ruleForm.psid
          this.patentform.ptId = this.ruleForm.ptid
          this.patentform.applicationNumber = this.ruleForm.applicationnumber
          this.patentform.applicationTime = this.ruleForm.applicationtime
          this.patentform.authorizationNumber = this.ruleForm.authorizationnumber
          this.patentform.authorizationTime = this.ruleForm.authorizationtime
          this.patentform.publicNumber = this.ruleForm.publicnumber
          this.patentform.publicTime = this.ruleForm.publictime
          this.patentform2.data = this.patentform
          this.submitUpload2()
        } else {
          console.log('专利文件未上传或上传失败！请稍后重试')
          return false
        }
      })
    },

    /**
     * @description: 清空表单
     * @param {*} formName
     * @return {*}
     * @author: Haiting Zhao
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss">
.el-main>.el-row {
  margin-top: 15px;
  margin-bottom: 15px;
  /* margin: 20px auto; */
  /* padding-bottom: 30px; */
  /* padding-left: 25%; */
  /* border-top: 1px solid rgb(221, 221, 221); */
}
</style>
